@tailwind base;
@tailwind components;
@tailwind utilities;

/* 通用自定义样式 */
@layer base {
  body {
    @apply bg-gray-50 text-gray-900 font-sans;
  }
}

@layer components {
  /* 状态栏样式 */
  .status-bar {
    @apply h-11 flex items-center justify-between px-4 bg-white relative z-10;
  }
  
  .status-bar-time {
    @apply font-semibold text-sm;
  }
  
  .status-bar-icons {
    @apply flex items-center;
  }
  
  .status-bar-icons i {
    @apply ml-2;
  }
  
  /* 导航栏样式 */
  .nav-bar {
    @apply h-12 flex items-center justify-between px-4 border-b border-gray-100 bg-white relative;
  }
  
  .nav-title {
    @apply text-base font-semibold text-black;
  }
  
  .nav-btn {
    @apply text-primary text-base bg-transparent border-none cursor-pointer;
  }
  
  /* 底部标签栏样式 */
  .tab-bar {
    @apply h-20 flex justify-around items-center bg-white border-t border-gray-100;
  }
  
  .tab-item {
    @apply flex flex-col items-center text-xs text-gray-400 w-1/5;
  }
  
  .tab-item.active {
    @apply text-primary;
  }
  
  .tab-icon {
    @apply text-xl mb-1;
  }
  
  /* 卡片组件样式 */
  .card {
    @apply bg-white rounded-xl p-4 mb-4 shadow-sm;
  }
  
  .card-title {
    @apply text-base font-semibold text-black mb-3;
  }
  
  /* 按钮样式 */
  .btn-primary {
    @apply bg-primary text-white py-3 px-6 rounded-xl border-none font-semibold text-center w-full text-base;
  }
  
  .btn-outline {
    @apply bg-transparent text-primary py-3 px-6 rounded-xl border border-primary font-semibold text-center w-full text-base;
  }
}
